<template>
<div>
    <div id="container"></div>
    <div>
      <el-form>
      <el-table id="forwardTable" v-loading="loading" :data="recordList" >
        <el-table-column width="150" label="部门名" align="center" prop="receiveDeptName" />
        <el-table-column width="150" label="具体执行人员" align="center" prop="receiveUserName" />
        <el-table-column width="150" label="上级部门名" align="center" prop="forwardDeptName" />
        <el-table-column width="200" label="转发备注" align="center" prop="forwardRemark" :show-overflow-tooltip='true'/>
        <el-table-column width="120" label="转发状态" align="center" prop="forwardStatus" :formatter="forwardStatusConvert" />
        <el-table-column width="120" label="是否生成任务" align="center" prop="generateTaskStatus" :formatter="generateTaskStatusConvert"/>
        <el-table-column width="200" label="创建日期" align="center" prop="createTime" />


        <el-table-column label="上级部门转发附件"  >
          <template slot-scope="scope">

            <div class="forwardImg">
          <ul>
            <li  v-for="(img,index) in scope.row.imageList" :key="index" style="text-align: center;">
              <div style="position: relative">
              <img :src="img.fileUrl" style="width: 80px;height:80px;" @click="handlePictureCardPreview(img.fileUrl)" />
<!--              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(img.fileUrl)"
              >
              <i  class="el-icon-zoom-in" style="position: absolute;top: 35px;left: 35px;"></i>
              </span>-->
              </div>
            </li>
          </ul>
            </div>
          </template>
        </el-table-column>
      </el-table>

<!--      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getProcessList"
      />-->
      </el-form>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>

</div>
</template>
<script>
import { getForwardDetail,receiveDeptId,listProcess } from "@/api/task/record";
import { userPost,getUserId} from "@/api/task/information";
import G6 from "@antv/g6";
export default {
  name: "orderdetail",
  data() {
    return {
      detailInfo: null,
      width:null,
      height:null,
      userDeptId:undefined,
        dialogImageUrl: '',
        dialogVisible: false,
        forwardId:undefined,
        loading: true,
        total: 0,
        memberUserId:undefined,
        recordList:[],
        // 查询参数
        queryParams: {
/*            pageNum: 1,
            pageSize: 10,*/
            forwardId:undefined,
        },
    };
  },
  created() {
/*      this.getUserPost();
      this.getProcessList();*/
  },
  mounted() {
         this.GetForwardDetail();
  },
  methods: {
    //获取详情
    async GetForwardDetail() {
      try {
          //同步获取deptid
          await userPost().then(response => {
              this.userPost = response.data;
              console.log(this.userPost);
              // this.getDeptId();
          });
          await receiveDeptId().then(response => {
              this.userDeptId = response.data;
              // if(this.userPost == 'section_member'){
              //     this.receiveUserId();
              // }
          });
          if(this.userPost == 'section_member'){
              await getUserId().then(response => {
                  this.memberUserId = response.data;
                  this.userDeptId = this.userDeptId +"--"+this.memberUserId;
              });
          }


        let forwardId = this.$route.query.forwardId;
         this.queryParams.forwardId = forwardId;
       await getForwardDetail(forwardId).then((response) => {
          this.detailInfo = response.data[0];
          console.log(this.detailInfo)
         this.draw()
        });
          //获取下方列表
          this.getProcessList();
      } catch (error) {
        this.$message({
          type: "error",
          message: error,
        });
      }
    },
      /** 查询当前人员的岗位*/
       getUserPost() {
           userPost().then(response => {
              this.userPost = response.data;
              console.log(this.userPost);
              this.getDeptId();
          });
      },
    //获取当前人员的deptId

    async getDeptId(){
        await receiveDeptId().then(response => {
            this.userDeptId = response.data;
            if(this.userPost == 'section_member'){
                this.receiveUserId();
            }
        });
    },
      //科员需要查询自己的userId
     async receiveUserId(){
          await getUserId().then(response => {
              this.memberUserId = response.data;
              this.userDeptId = this.userDeptId +"--"+this.memberUserId;
              console.log(this.userDeptId);
          });
      },
      forwardStatusConvert(row){
        if(row.forwardStatus == "1"){
            return "待转发";
        }else{
            return "无需转发"
        }
      },
      generateTaskStatusConvert(row){
          if(row.generateTaskStatus == "1"){
              return "已生成";
          }else{
              return "正常"
          }
          },
      getProcessList(){
          this.loading = true;
          listProcess(this.queryParams).then(response => {
              this.recordList = response.rows;
              console.log(this.recordList)
              this.total = response.total;
              this.loading = false;
          });
      },
      handlePictureCardPreview(url){
          this.dialogImageUrl = url;
          this.dialogVisible = true;
      },
    draw(){
        var that = this;
            G6.registerNode(
        "tree-node",
        {
          drawShape: function drawShape(cfg, group) {
              console.log(that.userDeptId);
            const rect = group.addShape("rect", {
              attrs: {
                fill: "#fff",
                stroke: cfg.cid==that.userDeptId?'rgb(24, 144, 255)':'#666',
              },
              name: "rect-shape",
            });
            const content = cfg.deptName.replace(/(.{19})/g, "$1\n");
            const text = group.addShape("text", {
              attrs: {
                text: content,
                x: 0,
                y: 0,
                textAlign: "left",
                textBaseline: "middle",
                fill:cfg.cid==that.userDeptId?'rgb(24, 144, 255)':'#666',
              },
              name: "rect-shape",
            });
            const bbox = text.getBBox();
            const hasChildren = cfg.generateTaskStatus && cfg.generateTaskStatus==1;
            if (hasChildren) {
              group.addShape('marker', {
                attrs: {
                  x: bbox.maxX + 12,
                  y: 0,
                  r: 6,
                  symbol: G6.Marker.expand,
                  stroke: 'red',
                  lineWidth: 2,
                },
                name: 'collapse-icon',
              });
            }
            rect.attr({

              x: bbox.minX - 4,
        y: bbox.minY - 6,
        width: bbox.width + (hasChildren ? 26 : 8),
        height: bbox.height + 12,
            });
            return rect;
          },
        },
        "single-node"
      );

      this.width = document.getElementById("container").scrollWidth;
     this.height = document.getElementById("container").scrollHeight || 500;
           const graph = new G6.TreeGraph({
        container: "container",
        width:this.width,
        height:this.height,
        // modes: {
        //   default: [
        //     {
        //       type: "collapse-expand",
        //       onChange: function onChange(item, collapsed) {
        //         const data = item.get("model");
        //         const icon = item
        //           .get("group")
        //           .find((element) => element.get("name") === "collapse-icon");
        //         if (collapsed) {
        //           icon.attr("symbol", G6.Marker.expand);
        //         } else {
        //           icon.attr("symbol", G6.Marker.collapse);
        //         }
        //         data.collapsed = collapsed;
        //         return true;
        //       },
        //     },
        //     "drag-canvas",
        //     "zoom-canvas",
        //   ],
        // },
        defaultNode: {
          type: "tree-node",
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
        },
        defaultEdge: {
          type: "cubic-horizontal",
          style: {
            stroke: "#A3B1BF",
          },
        },
        layout: {
          type: "compactBox",
          direction: "LR",
          getId: function getId(d) {
            return d.id;
          },
          getHeight: function getHeight() {
            return 16;
          },
          getWidth: function getWidth() {
            return 16;
          },
          getVGap: function getVGap() {
            return 20;
          },
          getHGap: function getHGap() {
            return 80;
          },
        },
      });
      G6.Util.traverseTree(this.detailInfo, function (item) {
        item.id = item.cid;
      });
      graph.data(this.detailInfo);
      graph.render();
      graph.fitView();

      graph.on("node:click", (evt) => {
        const item = evt.item._cfg.model; // 被操作的节点 item里的数据
        if(item.generateTaskStatus==1){
              this.$router.push({
                path:"/taskk/index",
                query:{
                    taskId:item.taskId
                }
            })
        }
       
      });
    }
  },
};
</script>
<style lang="scss">
#container{
  width:100%;
  height:500px;
  // background:#f5f5f5;
  // border-bottom:1px solid #ddd;
  
}
.forwardImg{
  float:left;
  width: 700px;
}
.forwardImg ul{
  padding: 0;
}
.forwardImg ul li{
  float:left;
  list-style:none;
  margin-right: 1%;
}

#forwardTable tr{
  height: 100px;
}
</style>


